<template>
  <div>
    <el-page-header @back="goBack" :content="$route.query.id ? '编辑场景' : '新建场景'"> </el-page-header>

    <div class="ueba-detail-main">
      <base-form
        ref="formData"
        :loadingProp="formData.loadingProp"
        :ruleForm="formData.data"
        :rules="formData.rules"
        :formValidateData="formData.config"
        :optionData="optionData"
      >
      </base-form>
    </div>
  </div>
</template>

<script>
import baseForm from "components/formValidate/myForm";
export default {
  components: {
    baseForm,
  },
  props: {},
  data() {
    return {
      formInline: {},
      optionData: {
        sceneId: [],
        isMutex: this.$store.state.dictionary["whetherNum"],
        isEnable: this.$store.state.dictionary["whetherNum"],
      },
      formData: {
        loadingProp: {
          save: false,
        },
        data: {
          isMutex: 0,
          isEnable: 0,
          sceneId: "",
          optionName: "",
          remark: "",
          itemIdList: [],
        },
        config: [
          { title: "基础信息" },
          {
            type: "select",
            span: 12,
            label: "场景类型",
            prop: "sceneId",
            clearable: true,
            filterable: false,
          },

          { type: "text", span: 12, label: "场景名称", prop: "optionName" },
          { type: "radio", span: 24, label: "是否互斥", prop: "isMutex" },
          { type: "radio", span: 24, label: "是否启用", prop: "isEnable" },

          { type: "textarea", span: 24, label: "备注", prop: "remark" },

          { title: "关联指标" },
          {
            type: "select",
            span: 24,
            label: "指标名称",
            prop: "itemIdList",
            clearable: true,
            filterable: true,
            multiple: true,
            option: [],
          },
          {
            type: "operation",
            style: { "text-align": "center" },
            children: [
              {
                prop: "save",
                label: "保 存",
                type: "primary",
                click: () => {
                  //if中是验证表单有没有通过，不是提交数据
                  if (this.$refs.formData.submitForm()) {
                    //这里是提交数据
                    this.submitForm();
                  }
                },
              },
            ],
          },
        ],
        rules: {
          sceneId: [{ required: true, message: "请输入", trigger: "blur" }],
          optionName: [{ required: true, message: "请输入", trigger: "blur" }],
          isMutex: [{ required: true, message: "请选择", trigger: "blur" }],
        },
      },
    };
  },
  async mounted() {
    //加载下拉框
    let items = await this.$store.dispatch("config/itemFetchallSimply", {});

    //指标名称下拉框
    this.formData.config.filter((e) => e.prop == "itemIdList")[0].option = items.data.map((e) => {
      return {
        label: e.name,
        value: e.id,
      };
    });
    this.optionData.sceneId = await this.$store.dispatch("config/sceneTypeOption", {
      pageSize: 1000,
      pageNum: 1,
    });
    if (this.$route.query.id) {
      // edit
      let temp = await this.fatchData(this.$route.query.id);

      temp.itemIdList = temp.items.map((e) => {
        return e.id;
      });
      console.log("tt", temp);
      this.formData.data = temp;
    } else {
      // add
    }
  },
  methods: {
    goBack() {
      this.$router.push("/config/scenelist/scenelist");
    },
    async submitForm() {
      this.formData.loadingProp.save = true;
      let params = Object.assign({}, this.formData.data);
      let res = await this.$store.dispatch("config/sceneOptionUpdate", params);
      this.formData.loadingProp.save = false;
      let state = this.message.state(res);
      if (!state) return;
      this.goBack();
    },

    async fatchData(id) {
      let res = await this.$store.dispatch("config/sceneOptionGet", { id: id });
      return res.data;
    },
  },
  computed: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.check-box {
  margin: 0 0 20px 20px;
}
</style>
